<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>New Page</title>
    <script src="js/lib/vue.min.js"></script>
    <script src="js/lib/axios.min.js"></script>
</head>
<body>

<div id="app">

    <p><button type="button" @click="goToViewPage">go to view page</button></h2></p>

    <form>

        <p>file name :</p>
        <input v-model="fileName" placeholder="please input file name...">

        <p>content :</p>
        <textarea v-model="fileContent" placeholder="please input file content..." rows="5" cols="34" ></textarea><br/>

        <button type="button" @click="create">Save</button>

    </form>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            fileName: '',
            fileContent: ''
        },
        methods: {
            create: function () {
                // 简单验空
                if (this.fileName == "") {
                    alert("file name is empty!")
                    return;
                }
                if (this.fileContent == "") {
                    alert("file content is empty!")
                    return;
                }

                // 调用创建文件接口
                axios.post('/api/file/create',
                        {
                            "fileName": this.fileName,
                            "fileContent": this.fileContent
                        }
                ).then(response => {
                    // 操作结果 成功：true 失败：false
                    var result = response.data;
                    if (result) {
                        alert("create file success!")
                        window.location.href='view.html';
                    } else {
                        alert("create file fail!")
                    }
                })
                .catch(error => {
                    alert(error);
                });
            },
            goToViewPage: function () {
                window.location.href='view.html';
            }
        }
    })
</script>

</body>
</html>

